<template>
  <div class="login-record setting-content">
    <h3>登录记录</h3>
    <div class="content">
      <p class="tip">若发现异常登录，请尽快修改密码！</p>
      <a-table
        :loading="loading"
        tableLayout="fixed"
        :columns="columns"
        :bordered="false"
        :data-source="tableData"
        :pagination="pagination"
        @change="handlerPageUpdate"
        size="middle">
          <template
            slot="loginType"
            slot-scope="loginType">
            <p style="color: #2080f7">{{ loginTypeMap[loginType] }}</p>
          </template>
        </a-table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
const columns = [
  { dataIndex: 'loginTime', title: '登录时间' },
  { dataIndex: 'address', title: '登录地址' },
  { dataIndex: 'ip', title: 'IP' },
  { dataIndex: 'loginType', title: '登录方式', scopedSlots: { customRender: 'loginType' } }
]

const loginTypeMap = {
  1: '用户名/邮箱',
  2: '邮箱验证码',
  3: '微信扫码',
  4: 'Gitee授权',
  5: 'Github授权'
}
export default {
  name: 'AccountPage',
  data () {
    return {
      loading: false,
      loginTypeMap,
      columns,
      tableData: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 10,
        size: 'middle',
        hideOnSinglePage: true
      }
    }
  },

  head () {
    return {
      title: this.userInfo.nickname + '登录记录',
      meta: [
        { charset: 'utf-8' },
        {
          hid: 'description',
          name: 'description',
          content: this.userInfo.nickname + '登录记录'
        }
      ]
    }
  },

  created () {
    this.findUserLoginLogs()
  },

  methods: {
    async findUserLoginLogs () {
      this.loading = true
      try {
        const { current: pageNo, defaultPageSize: pageSize } = this.pagination
        const { data } = await this.$axios.get(`/gimishare/api/v1/log/list?pageNo=${pageNo}&pageSize=${pageSize}`)
        this.tableData = data.list
        this.pagination.total = data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },

    handlerPageUpdate (value) {
      console.log(value)
      this.pagination.current = value.current
      this.findUserLoginLogs()
    }
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  }
}
</script>

<style scoped lang="less">
.login-record {
  .content {
    padding: 0 12px 12px;
    .tip {
      color: #4c4c4c;
      padding: 20px 12px;
    }
    ::v-deep .ant-table-body {
      margin: 0;
      .ant-table-thead, .ant-table-tbody {
        tr {
          td, th {
            padding: 10px 12px;
            font-size: 12px;
            border: none;
          }
          &:nth-child(2n) {
            td {
              background-color: #e6f7ff !important;
            }
          }
          &:hover {
            td {
              background-color: inherit;
            }
          }
        }
      }
    }
    ::v-deep .ant-table-pagination.ant-pagination {
      float: none;
      text-align: center;
      margin-top: 50px;
      li, a {
        border-radius: 2px;
        font-size: 12px;
        line-height: 32px;
      }
    }
  }
}
</style>
